<#assign toolPath='${contextPath}/static/tool' >
<#assign imagePath='${contextPath}/static/images' >
<script type="text/javascript" src="${toolPath}/jquery/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=${controller.appConfig.mapKey}"></script>
<div class="popup_box_content">
    <div style="width:100%;height:100%;overflow: hidden;margin: 0;font-family: '微软雅黑';" id="viewContent">
    </div>

    <script type="text/javascript">
        var map = new BMap.Map("viewContent");
        map.centerAndZoom(new BMap.Point(109.369334, 38.16197), 5);  // 初始化地图,设置中心点坐标和地图级别
        map.addControl(new BMap.MapTypeControl());   //添加地图类型控件

        map.enableDragging();//启用地图拖拽事件，默认启用(可不写)
        map.enableScrollWheelZoom();//启用地图滚轮放大缩小
        map.enableDoubleClickZoom();//启用鼠标双击放大，默认启用(可不写)
        map.enableKeyboard();//启用键盘上下左右键移动地图

        //向地图中添加缩放控件
        var ctrl_nav = new BMap.NavigationControl({
            anchor: BMAP_ANCHOR_TOP_LEFT,
            type: BMAP_NAVIGATION_CONTROL_LARGE
        });
        map.addControl(ctrl_nav);

        //向地图中添加比例尺控件
        var ctrl_sca = new BMap.ScaleControl({anchor: BMAP_ANCHOR_BOTTOM_LEFT});

        var points = new Array();
        var first, last;
        var startIcon = new BMap.Icon("${imagePath}/marker_icon_start.png", new BMap.Size(35, 51), {
            anchor: new BMap.Size(10, 30)
        });
        var endIcon = new BMap.Icon("${imagePath}/marker_icon_end.png", new BMap.Size(35, 51), {
            anchor: new BMap.Size(20, 49)
        });
        var pois = new Array();
        function createMap(obj) {
            pois.length = 0;
            map.clearOverlays();
            if (obj.length != 0) {
                // 绘制折线方向
                var sy = new BMap.Symbol(BMap_Symbol_SHAPE_BACKWARD_OPEN_ARROW, {
                    scale: 0.5,//图标缩放大小
                    strokeColor:'blue',//设置矢量图标的线填充颜色
                    strokeWeight: '2',//设置线宽
                });
                var icons = new BMap.IconSequence(sy, '10', '30');

                // pointListInfo(obj);
                showPoly(obj,icons);
            } else {
                alert("该时段电池未上报信息");
            }
        }
        var id = "markerAnimation";
        function markerAnimation(lng, lat) {
            var overlays = map.getOverlays();
            var flag = 0;
            $.each(overlays, function (index, data) {
                if (data.id == id) {
                    map.removeOverlay(data);
                    return;
                }
            })
            marker = new BMap.Marker(new BMap.Point(lng, lat));
            marker['id'] = id;
            map.addOverlay(marker);
            marker.setAnimation(BMAP_ANIMATION_BOUNCE);
            map.centerAndZoom(new BMap.Point(lng, lat), 17);
        }
        function showPoly(list,icons) {
            // 循环显示点对象
            for (var i = 0; i < list.length; i++) {
                //1.坐标点重合舍弃 2.带方向的折线
                if(i < list.length - 1){
                    if(list[i].lat != list[i+1].lat || list[i].lng != list[i+1].lng){
                        pois.push(new BMap.Point(list[i].lng, list[i].lat));
                        if (i != 0 && i != list.length - 1) {
                            marker = new BMap.Marker(pois[pois.length-1]);
                            map.addOverlay(marker);
                            marker.setLabel(new BMap.Label("标记:"+(i+1),{offset:new BMap.Size(20,-10)}));
                        }
                    }
                }
            }
            pois.push(new BMap.Point(list[list.length-1].lng, list[list.length-1].lat));
            marker = new BMap.Marker(pois[0], {icon: startIcon});
            map.addOverlay(marker);
            var ends = pois[pois.length-1];
            marker = new BMap.Marker(ends, {icon: endIcon});
            map.addOverlay(marker);
            map.centerAndZoom(ends, 16);

            var polyline =new BMap.Polyline(pois, {
                enableEditing: false, //是否启用线编辑，默认为false
                enableClicking: true, //是否响应点击事件，默认为true
                icons:[icons],
                strokeWeight:'3',   //折线的宽度，以像素为单位
                strokeOpacity: 0.8, //折线的透明度，取值范围0 - 1
                strokeColor:"green"   //折线颜色
            });
            map.addOverlay(polyline);//增加折线

            // function pointListInfo(list) {
            //     for (var i = 0; i < list.length; i++) {
            //         points.push(new BMap.Point(list[i].lng, list[i].lat));
            //     }
        }
    </script>
</div>